<template>
    <view>
        <uni-search-bar></uni-search-bar>
        <swiper  class="swiper" circular autoplay interval="3000" duration="200" indicator-dots
            indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)">
            <swiper-item class="item" v-for="item in indexSwipers" :key="item.id">
                <image :src="`/gongyi/common/download?name=${item.picture}`" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
        <view class="cate-section">
            <view class="cate-item">
                <image src="/static/fonts/1.png" @click="clisd" v-if="userInfo.role == 'super'"></image>
                <image src="../../static/fonts/1.png" v-if="userInfo.role == 'user'"  @click="goForbidden" style="opacity: 10%;"></image>
                <text>发布活动</text>
            </view>
            <view class="cate-item">
                <image src="/static/fonts/2.png" @click="dian"></image>
                <text @click="dian">出闲置</text>
            </view>
        </view>
        <view class="ad-1">
            <image src="/static/images/c2.webp" mode="scaleToFill"></image>
        </view>
        <!-- 热门·活动组· -->
        <view class="f-header m-t">
            <image src="/static/fonts/3.png" @click="showBriefActivity"></image>
            <view class="tit-box">
                <text class="tit">热门活动</text>
                <text class="tit2">hot activity</text>
            </view>
            <uni-icons type="more-filled" @click="moreActivity"></uni-icons>
        </view>
        <scroll-view class="floor-list" scroll-x>
            <view class="scoll-wrapper">
                <view v-for="item in activities" :key="item.id" class="floor-item" @click="goDetailActivity(item)">
                    <image :src="`/gongyi/common/download?name=${item.picture}`" mode="aspectFill"></image>
                    <!-- <text class="title clamp">{{item.activityName}}</text> -->

                    <text class="wb_hide_2">{{item.introduction}}</text>
                    <!-- <text class="nit">202.21.12-2022.23.12</text> -->

                </view>
            </view>
        </scroll-view>
        <view class="f-header m-t">
            <image src="/static/fonts/3.png"></image>
            <view class="tit-box">
                <text class="tit">热门闲置</text>
                <text class="tit2">二手</text>
            </view>
            <uni-icons type="more-filled" @click="vvv"></uni-icons>
        </view>
        <scroll-view class="floor-list" scroll-x>
            <!-- v-for="item in activities" :key="item.id" class="floor-item" -->
            <view class="scoll-wrapper">
                <view class="floor-item" v-for="item in seconds" :key="item.id" @click="goDetailSec(item.id)">
                    <image :src="`/gongyi/common/download?name=${item.pictureUrl}`" mode="aspectFill"></image>

                    <text class="wb_hide_2">{{item.textMessage}}</text>
                    <!-- <text class="nit">202.21.12-2022.23.12</text> -->
                </view>
            </view>
        </scroll-view>




    </view>
</template>

<script>
    export default {
        data() {
            return {
                activities: [],
                userInfo: {},
                seconds: [],
                indexSwipers: []
            }
        },
        onShow() {
            this.userInfo = uni.getStorageSync("user");
            console.log(this.userInfo);
            this.showBriefActivity();
            this.getAllSeconds();
            uni.request({
                url:'/gongyi/user/selectUserById?id='+this.userInfo.id,
                method:'GET',
                success: (res) => {
                    // console.log("inmethod",res.data.user);
                    uni.setStorageSync("user", res.data.user);
                    this.userInfo = res.data.user;
                }
            });
        },
        methods: {
            async getAllSeconds() {
                await uni.request({
                    url: '/gongyi/second/getAllSeconds',
                    method: 'GET',
                    success: (res) => {
                        this.seconds = res.data.seconds;
                        // console.log(this.seconds)
                    }
                })
            },
            showBriefActivity() {
                uni.request({
                    url: '/gongyi/activity/getBriefInformation',
                    method: 'GET',
                    data: {
                        id: this.userInfo.id,
                    },
                    success: res => {
                        this.activities = res.data.activities
                        for (let i = 0; i <= 3; i++) {
                            this.indexSwipers[i] = this.activities[i];
                        }
                        // console.log(this.indexSwipers)
                        // console.log(res.data.activities);
                    }
                })
            },
            clisd() {
                uni.navigateTo({
                    url: "/pages/fabu/fabu"
                })
            },
            dian() {
                uni.navigateTo({
                    url: "/pages/fatie/fatie"
                })
            },

            goDetailSec(secId) {
                uni.navigateTo({
                    url: "/pages/fatie/Idle-market/goods-detail/goods-detail?id=" + secId
                })
            },
            goDetailActivity(item) {
                uni.navigateTo({
                    url: '/pages/fabu/more-activity/baoming/baoming?id=' + item.id + "&tag=0"
                })
            },
            vvv() {
                uni.navigateTo({
                    url: "/pages/fatie/Idle-market/Idle-market",

                })
            },
            goForbidden(){
                uni.showToast({
                    title:"暂无权限",
                    icon:'error'
                })
            },
            moreActivity() {
                uni.navigateTo({
                    url: "/pages/fabu/more-activity/more-activity"
                })
            }


        }


    }
</script>

<style lang="scss">
    .floor-list {
        white-space: nowrap;
    }

    .scoll-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .floor-item {
        width: 220upx;
        margin-top: 15rpx;
        margin-right: 20rpx;
        line-height: 1.8;

        image {
            width: 220upx;
            height: 220upx;
            border-radius: 6upx;
        }


        .price {
            display: block;
            font-size: 26rpx;
        }

    }


    page {
        background: #f5f5f5;
    }

    .swiper {
        height: 400rpx;
        margin-top: 10rpx;
        padding: 10rpx 10rpx;

        .item {
            padding: 10rpx;
            box-sizing: border-box;

            image {
                width: 100%;
                height: 380rpx;
            }
        }
    }

    .cate-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 15rpx 22rpx;
        background: #fff;

        .cate-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 原图标颜色太深,不想改图了,所以加了透明度 */
        image {
            width: 88rpx;
            height: 88rpx;
            margin-bottom: 14rpx;
            border-radius: 50%;
            opacity: .7;
            box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
        }
    }

    .ad-1 {
        width: 100%;
        height: 250rpx;
        padding: 10rpx 0;
        background: #fff;

        image {
            width: 100%;
            height: 100%;
            border-radius: 100rpx;
        }
    }

    .nit {
        display: block;
        font-size: 18rpx;
    }

    .f-header {
        display: flex;
        align-items: center;
        height: 100rpx;
        padding: 6rpx 30rpx 8rpx;
        background: #fff;

        image {
            flex-shrink: 0;
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
        }

        .tit-box {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .tit {

            line-height: 1.3;
        }

        .tit2 {}

        .icon-you {}

    }

    .more {
        float: right;
        margin-top: 150rpx;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-shrink: 0;
        width: 180rpx;
        height: 180rpx;
    }

    .navscroll {
        height: 100rpx;
        background: #F7F8FA;
        white-space: nowrap;
        top: var(--window-top);
        left: 0;
        z-index: 10;

        /deep/ ::-webkit-scrollbar {
            width: 4px !important;
            height: 1px !important;
            overflow: auto !important;
            background: transparent !important;
            -webkit-appearance: auto !important;
            display: block;
        }
    }

    .wb_hide_2 {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
</style>